<!DOCTYPE HTML>
<html>
	<head>
    	<title>WEB</title>
    <meta name="description" content="WEB">
    <meta name="keywords" content="WEB ...">
    
    <link href="fonts/css.css" rel='stylesheet' type='text/css'>
		<meta charset="utf-8">
		<title>Pure CSS3 Menu</title>
		<link href="fonts/style.css" media="screen" rel="stylesheet" type="text/css" />
		<link href="fonts/iconic.css" media="screen" rel="stylesheet" type="text/css" />
		<script src="fonts/prefix-free.js"></script>
        <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <link rel="stylesheet" href="css/estilo.css" type="text/css" />
    
    <script>
    
            function resetTabs(){
        $("#bloqueForm > div").hide(); //Hide all content
         
    }

    </script>
        
        
    <style>
    
body{
	  
	 
	  font-family: Arial, Helvetica;
	  font-size: small;
	  background-color: #eee;
          background-image: url('data:/gif;base64,R0lGODlhCAAIAJEAAMzMzP///////wAAACH5BAEHAAIALAAAAAAIAAgAAAINhG4nudroGJBRsYcxKAA7');
 }
	</style>
        
        <script type="text/javascript">
                function limpiar() {
var d = document.getElementById("bloqueForm");
while (d.hasChildNodes())
d.removeChild(d.firstChild);
}
            function llamarPagina(pagina){
          limpiar();
	$.post(pagina, function(data){
		$("#bloqueForm").html(data);
	});
}  
            
      
              
              
              
              
              </script>
     <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
  
    $('#boton_cargar').click(function() {  
        $.ajax({  
            url: 'contenido.html',  
            success: function(data) {  
                $('#div_dinamico').html(data);  
            }  
        });  
    });  
  
    $('#divimpresora').click(function() {  
        $.ajax({  
            url: 'tabImpresora.html',  
            success: function(data) {  
                $('#bloqueForm').html(data);  
                $('#bloqueForm div').slideDown(1000);  
            }  
        });  
    });  
    
    
   $('#divcomponente').click(function() {  
        $.ajax({  
            url: 'tab.html',  
            success: function(data) {  
                $('#bloqueForm').html(data);  
                $('#bloqueForm div').slideDown(1000);  
            }  
        });  
    });  
       $('#divtarjeta').click(function() {  
        $.ajax({  
            url: 'tarjetas.html',  
            success: function(data) {  
                $('#bloqueForm').html(data);  
                $('#bloqueForm div').slideDown(1000);  
            }  
        });  
    }); 
       $('#divmonitor').click(function() {  
        $.ajax({  
            url: 'tabmonitor.html',  
            success: function(data) {  
                $('#bloqueForm').html(data);  
                $('#bloqueForm div').slideDown(1000);  
            }  
        });  
    }); 
           $('#divusuario').click(function() {  
        $.ajax({  
            url: 'tabUsuario.html',  
            success: function(data) {  
                $('#bloqueForm').html(data);  
                $('#bloqueForm div').slideDown(1000);  
            }  
        });  
    });
	      $('#divcomputador').click(function() {  
        $.ajax({  
            url: 'tabComputador.html',  
            success: function(data) {  
                $('#bloqueForm').html(data);  
                $('#bloqueForm div').slideDown(1000);  
            }  
        });  
    });
});  
</script>        
	</head>
    <body>
    <div id="cajaheader"></div>
    <div id="principal">
    	<header>
        <div id="logo">
        <h1>Titulo<h1>
        <h2>Sub titulo</h2>
        </div>
        
        	
    	</header>
        
        <div id="contenido">
       
        <div class="wrap">
	
	<nav>
		<ul class="menu">
			<li><a href="#"><span class="iconic home"></span>INICIO</a></li>
			<li><a href="#"><span class="iconic user"></span>ADMINISTRAR</a>
				<ul>
					<li><a href="#" id="divusuario">Usuarios</a></li>
					                  
				</ul>
			</li>
            <li><a href="#"><span class="iconic plus-alt"></span>INVENTARIO</a>
				<ul>
					<li><a href="#" id="divmonitor">Monitor</a></li>
					<li><a href="#" id="divimpresora">Impresora</a></li>
                    <li><a href="#">Monitor</a></li>
                    <li><a href="#" id="divcomponente">Componentes</a></li>
                      <li><a href="#" id="divtarjeta">Tarjeta</a></li>
				</ul>
			</li>

			<li><a href="#"><span class="iconic magnifying-glass"></span>SOPORTE</a>
				<ul>
                <li><a href="#" id="divcomputador">Asignar Pc's</a></li>
					<li><a href="#">Papeletas de Intervención</a></li>
					
				</ul>
			</li>
			<li><a href="#"><span class="iconic map-pin"></span>REPORTES</a>
				<ul>
					<li><a href="#">Inventario</a></li>
					<li><a href="#">Soporte</a></li>
				</ul>
			</li>
			<li><a href="cerrarSesion.php"><span class="iconic exit-fullscreen"></span> CERRAR SESIÓN</a>
				
			</li>
		</ul>
		<div class="clearfix"></div>
	</nav>
	</div>
     
     <div id="bloqueForm" style="  width:940px; height:100%; margin:0 auto 0 auto; ">
         
         
         
     </div>       
 <br> <br> <br> <br>    
                  
 </div>   
  <footer>
        <div class="vcard">
        <div><span class="name"></span> - <span class="adress"></span><span class="locality">Slatan</span><span class="Country">Peru</span></div>
        </div>
        <h6></h6>
        </footer>
        </div>
	</body>
</html>

